<template>
	<view class="container">
		<monthly-title class="logo" title="本月发展里程碑"></monthly-title>
		<view class="border">
			<view class="dashed">
				<text class="title">
					儿心量表
				</text>
				<text class="content">
					{{currentValue.label}}
				</text>
				
				<text class="title">
					格赛尔发育量表
				</text>
				<text class="content">
					{{currentValue.content}}
				</text>
			</view>
		</view>
		
<!-- 		<view class="edit" @click="editClick">
			<text>编辑</text>
		</view>
		<u-popup v-model="show" mode="bottom">
			<view class="popup">
				<scroll-view scroll-y="true" style="max-height: 800rpx;">
					<u-form :model="form" ref="uForm" label-width="200">
					</u-form>
				</scroll-view>
				<view class="confrim-btn">
					<u-button @click="actionClick">确定</u-button>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import MonthlyTitle from './monthly-title.vue'
	import XUpload from '@/components/x-upload'
	export default {
		components: {
			MonthlyTitle,
			XUpload
		},
		props: {
			value: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		computed: {
			currentValue: {
			  get () {
				return this.value
			  },
			  set (val) {
				  console.log(val)
				  this.$emit('input', val)
			  }
			},
		},
		data() {
			return {
				show: false,
				form: {},
				
				formData: {
					'bizType': 'monthly'
				},
			}
		},
		created() {
			this.form = { ...this.currentValue }
		},
		methods: {
			actionClick() {
				this.$refs.uUpload.upload();
			},
			
			onUploaded(data) {
				this.form.recordImage = data.resourceUrl;
				this.currentValue = { ...this.form };
				this.show = false;
			},
			
			editClick() {
				this.show = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
		width: 100%;
	}

	.edit{
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 20rpx;
		left: 20rpx;
		width: 88rpx;
		height: 88rpx;
		background: linear-gradient(0deg, #F5AC3C 0%, #AACD22 100%);
		border: 3rpx solid rgba(255,255,255,0.3);
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(164,164,164,0.2);
		border-radius: 50%;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
	}
	.popup{
		padding: 30rpx;
	}

	.container{
		// height: 100%;
		// width: 100%;
		background-color: #AACD22;
		// display: flex;
		// flex-direction: column;
		background-repeat: space;
		background-image: url('https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/yb_four_1.png');

		.logo{
			margin-left: 27rpx;
		}
		
		.border{
			border: 2rpx solid #552323;
			border-radius: 50rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
			padding: 30rpx;
			
			.dashed{
				border: 2rpx dashed #552323;
				border-radius: 50rpx;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				
				.title{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 800;
					line-height: 48rpx;
					color: #333333;
					margin-top: 20rpx;
				}
				
				.content{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 48rpx;
					color: #333333;
				}
			}
		}
	}
</style>